<html>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.css') }}">
<!--link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-table.css') }}"-->
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-table.js') }}"></script>
<body>
<div class="bs-example">
                    <table data-toggle="table"  id="table1" data-pagination="true" data-search="true">
                        <thead>
                            <tr>
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
                                <th data-field="name" data-align="center" data-cell-style="cellStyle" data-sortable="true">Item Name</th>
                                <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
                            </tr>
                        </thead>
                    </table>
                </div>
<script>
$('#table1').bootstrapTable({
    url: '/data'
});
    function cellStyle(row, value, index) {
        var classes = ['active', 'label-success', 'info', 'warning', 'danger'];

        if (index % 2 === 0 ) {
            return {
                classes: classes[index % 5]
            };
        }
        return {};
    }
</script>

</body>
</html>

